<template>
	<div class="userSetting">
		<!-- 头部 -->
		<div class="nav_top d-flex jc-between ai-center bg-white">
			<div> 
				<el-button type="text" @click="$router.push('/user')">
					<div class="iconfont icon-back ml-1 fs-xxxl text-dark"></div>
				</el-button>
			</div>
			<div class="fs-xxl text-dark">
				账户设置
			</div>
			<div></div>
		</div>
		<!-- 用户信息 -->
        <div class="bg-white my-3 py-2 px-2">
        	<router-link to="/user/userSetting/setAvatar" tag="div" class="d-flex jc-between ai-center border-bottom">
        		<div>头像</div>
        		<div class="d-flex ai-center">
        			<div class="pr-1">
        				<van-image
        				style="width: 40px; height: 40px; border-radius: 50%;"
        				:src="user.haedPic"
        				fit="cover">
        			</van-image>
        			</div>
        			<div class="iconfont icon-right text-grey"></div>
        		</div>
        	</router-link>
        	<div class="d-flex jc-between ai-center py-3 border-bottom">
        		<div>昵称</div>
        		<div class="d-flex ai-center">
        			<div class="pr-1">{{user.username}}</div>
        			<div class="iconfont icon-right text-grey"></div>
        		</div>
        	</div>
        	<div class="d-flex jc-between ai-center py-3">
        		<div>手机号</div>
        		<div class="d-flex ai-center">
        			<div class="pr-1">{{user.username}}</div>
        			<div class="iconfont icon-right text-grey"></div>
        		</div>
        	</div>

        </div>

        <div class="bg-white my-3 py-2 px-2">
        	<router-link to="/user/userSetting/setPassword" tag="div" class="d-flex jc-between ai-center py-3 border-bottom">
        		<div>账户密码管理</div>
        		<div class="d-flex ai-center">
        			<div class="pr-1"></div>
        			<div class="iconfont icon-right text-grey"></div>
        		</div>
        	</router-link>
            <router-link :to="`/faceRegist/${user.username}`" tag="div" class="d-flex jc-between ai-center py-3 border-bottom">
                <div>注册人脸</div>
                <div class="d-flex ai-center">
                    <div class="pr-1"></div>
                    <div class="iconfont icon-right text-grey"></div>
                </div>
            </router-link>
            <div tag="div" class="d-flex jc-between ai-center py-3 border-bottom" @click="deleteFace">
                <div>注销人脸</div>
                <div class="d-flex ai-center">
                    <div class="pr-1"></div>
                    <div class="iconfont icon-right text-grey"></div>
                </div>
            </div>
        	<div class="d-flex jc-between ai-center py-3">
        		<div>我的二维码</div>
        		<div class="d-flex ai-center">
        			<div class="pr-1"></div>
        			<div class="iconfont icon-right text-grey"></div>
        		</div>
        	</div>
        </div>
        <!-- 注销用户 -->
        <div class="bg-white my-3 px-2">
             <el-button type="text" @click="destory">注销账户</el-button>
        </div>

	</div>
</template>

<script>
    import {Toast,MessageBox} from 'mint-ui'
	export default {
		data() {
			return {
				url: '',
                user: {}
			}
		},
		methods: {
           async deleteFace(){
             MessageBox.confirm("您确定要注销人脸？").then(
                action => {
                  this.$http.get('user/deleteFace.do').then(res => {
                    if(res.data.code === 1){
                        Toast('人脸删除成功')
                    }else {
                        Toast('未录入人脸')
                    }
                })

              },
              () => {}
              );



         },
         async destory(){
          MessageBox.confirm("确定要注销改用户？").then(
            action => {
              this.$http.get(`user/deleteUser.do?username=${this.user.username}`).then(res => {
                if (res.data.code != 0) {
                  localStorage.clear();
                  this.$router.push('/register')
                  Toast('操作完成！')
              }else{
               Toast('操作失败！')
           }
             })

          },
          () => {}
          );

         },
       },
        created(){
            this.user = JSON.parse(localStorage.userInfo)
        },
		mounted() {   //在页面创建之前设置body的背景色
			document.querySelector('body').setAttribute('style', 'background:#f1f3f4')
		}, 
        beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
        	document.querySelector('body').removeAttribute('style')
        },
	}
</script>

<style lang="scss" scoped>
	.el-button {
		width: 100%;
		color: #e84140;
	}

</style>